<template>
  <div class="singleItem">
    <div class="top">
      <a href="">
        <div class="top-title">
          <p class="job">{{cont.jobDemands}} </p>
          <span class="msg"></span>
          <em class="salary">{{cont.compensation}}</em>
        </div>
        <p class="location-education">
          <span class="location"> {{cont.companyDddress}}</span>
          <em class="education"> {{cont.education}}</em>
        </p>
      </a>
    </div>
    <div class="bottom">
        <img :src="cont.Aimg" alt="" class="SmallLogo">
        <span class="companyName">{{cont.companyName}}</span>
        <!-- <span class="companyName">{{cont.companyName}}</span> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "itemlist",
  props: ["cont"]
}
</script>
<style lang="less">
  .singleItem{
    width: 384px;
    height: 130px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin: 6px 0 6px 0;
      .top{
        width: 344px;
        height: 48px;
        background-color: #fff;
        flex-shrink: 0;
        box-sizing: border-box;
        padding-left: 10px;
        border-bottom: 1px solid #eef0f5;
          a{
            color: #8d92a1;
          }
          .top-title{
            .job{
              display: inline-block;
              width: 180px;
              color: #414a60;
            }
            .salary{
              margin-left: 20px;
              color: #fd7240;
            }
          }
          .location-education{
            font-size: 12px;
          }
      }
      .bottom{
        width: 344px;
        height: 48px;
        background-color: #fff;
        flex-shrink: 0;
        font-size: 12px;
        box-sizing: border-box;
        padding-left: 10px;
        display: flex;
        align-items: center;
          .SmallLogo{
            width: 30px;
            height: 30px;
            display: inline-block;
            // margin: 9px;
          }
          .companyName{
            margin-left: 20px;
          }
      }
  }
</style>
